import React, { Component } from 'react'
import { NavBar, Carousel} from 'antd-mobile';
import SearchInput from "../searchInput/searchInput"
import "./index.css"
import axios from "axios"
import { withRouter } from "react-router-dom"
class Index extends Component {
    state = {
        data: [],
        navList: [],
        goodsList: [],
        imgHeight: 170,
    }
    habddleDetaClick = (goods_id) => {
        this.props.history.push("/goodDtail/" + goods_id)
    }
    handleImgClick = (name) => {
        this.props.history.push("/goodsList/" + name)


    }
    handleImgClick1=() => {
        this.props.history.push("/goodList/query='123'");
    }
    


    componentDidMount() {
        axios.get("https://www.linweiqin.cn/api/public/v1/home/swiperdata").then((res) => {
            console.log(res)
            this.setState({
                data: res.data.message
            })
        })
        axios.get("https://www.linweiqin.cn/api/public/v1/home/catitems").then((nav1) => {
            console.log(nav1)
            this.setState({
                navList: nav1.data.message
            })
        })
        axios.get("https://www.linweiqin.cn/api/public/v1/home/floordata").then((goods1) => {
            console.log(goods1)
            this.setState({
                goodsList: goods1.data.message
            })
        })
    }
    render() {
        return (
            <div className="ygINdex">
                <div className="indexTop">
                    <NavBar
                        className="indexTopBg"

                    >优购商城</NavBar>

                </div>
                {/* search */}
                <div className="indexInp">
                    <SearchInput></SearchInput>
                    {/* <input placeholder="搜索" maxLength={8} className="indexSearch" /> */}

                </div>
                {/* banner */}
                <div className="indexBanner">
                    <Carousel
                        autoplay={true}
                        infinite
                    >
                        {this.state.data.map(val => (
                            <div
                                onClick={this.habddleDetaClick.bind(this, val.goods_id)}
                                key={val.goods_id}

                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                                <img
                                    src={val.image_src}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </div>
                        ))}
                    </Carousel>
                </div>
                {/* navList */}
                <div className="indexNavList">
                    {
                        this.state.navList.map((item) => {
                            return <div className="navListItem" key={item.image_src}>
                                <img src={item.image_src} alt="" onClick={this.handleImgClick.bind(this, item.name)}></img>
                                {/* <i clasName="listItemTit">{item.name}</i> */}
                            </div>
                        })
                    }
                </div>

                {/* goodsList */}
                <div className="indexGoodsList">
                    {this.state.goodsList.map((v) => {
                        return <div key={v.floor_title.name}>
                            <div className="goodsListTit">
                                <img src={v.floor_title.image_src} alt=""></img>
                            </div>
                            <div className="goodsListImg">
                                {v.product_list.map((vList)=>{
                                    return <div className="listImgL" key={vList.image_src} onClick={this.handleImgClick1}>
                                    <img src={vList.image_src} alt=""></img>
                                </div>
                                })}
                            </div>
                        </div>
                    })}

                </div>


            </div>
        )
    }
}
export default withRouter(Index)